<template>
  <div class="main">
    <vHeader title="个人信息" @return="$router.go('-1')" />
    <div class="contents">
      <div class="content">
        <div class="headImg">
          <van-uploader :after-read="upDateHeadImg" accept="image/*">
            <img :src="baseData&&baseData.data.imgUrl + usersInfo.avatar" />
          </van-uploader>
        </div>
        <div
          class="ids"
          v-clipboard:copy="usersInfo.userId"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >
          <span>ID: {{usersInfo.userId}}</span>
          <img src="~@/assets/images/center/copyIcon.png" />
        </div>
        <div class="line">
          <div class="left">账号</div>
          <div class="right">{{usersInfo.userName}}</div>
        </div>
        <div class="line">
          <div class="left">昵称</div>
          <div class="right nickName" @click="popShow=true">
            {{usersInfo.nickName}}
            <img src="~@/assets/images/arrow3.png" />
          </div>
        </div>
        <div class="line">
          <div class="left">钱包地址</div>
          <div
            class="right wallet"
            v-clipboard:copy="data.walletAddress"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            >
            <div>{{data.walletAddress}}</div>
            <img src="~@/assets/images/center/copyIcon.png" />
          </div>
        </div>
        <span class="tip">昵称每个自然月只能修改一次</span>
      </div>

      <van-popup class="pop" closeable v-model="popShow" round position="bottom">
        <div class="title">修改昵称</div>
        <div class="tip">您本月还有{{nickTimes}}次修改机会</div>
        <div class="model">
          <div class="line">
            <div class="left">昵称</div>
            <input v-model="usersInfo.nickName" />
          </div>
          <div class="text">长度限制2-8个字，包括中英文和数字</div>
          <van-button :disabled="!usersInfo.nickName||nickTimes==0" class="button" @click="updateNickname">确认</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import api from "@/api/center";
  import {
    mapState,
    mapMutations,
  } from "vuex";
  export default {
    data() {
      return {
        popShow: false,
        fileList: [],
        data: {},
        usersInfo: {},
        nickTimes: 0,
      }
    },
    computed: {
      ...mapState({
        loginUserinfo: state => state.global.loginUserinfo,
        baseData: state => state.global.baseData
      }),
    },
    methods: {
      ...mapMutations({
        changeLoginUserInfo: 'global/changeLoginUserInfo'
      }),
      async getBalance(){
        let {data} = await api.balance()
        if(data.code === 0){
          this.data = data.data;
        }
      },
      async updateNickname(){
        let {data} = await api.updateNickname({
          nickName: this.usersInfo.nickName
        })
        if(data.code === 0){
          this.popShow = false;
          this.$toast("修改成功")
        }
      },
      async getUsersInfo(){
        let {data} = await api.usersInfo()
        if(data.code === 0){
          this.usersInfo = data.data;
        }
      },
      async getNickTimes(){
        let {data} = await api.nickTimes()
        if(data.code === 0){
          this.nickTimes = data.data;
        }
      },
      async upDateHeadImg(file){
        const formData = new FormData()
        formData.append("files",file.file)
        formData.append("fileType",'7')
        api.upDateHeadImg(formData).then(res => {
          if (res.data.code === 0) {
            this.usersInfo.avatar = res.data.data;
            this.changeLoginUserInfo({
              ...this.loginUserinfo,
              avatar: res.data.data
            })
          }
        })
      },
      onCopy() {
        this.$toast("复制成功");
      },
      onError() {
        this.$toast("复制失败");
      },
    },
    mounted() {
      this.getUsersInfo()
      this.getBalance()
      this.getNickTimes()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .main{
    height: 100%;
    .contents{
      background: #f0f5fd;
      padding: 15px;
      height: calc(100% - 84px);
      overflow: auto;
      position: relative;
    }
  }
  .pop{
    .title{
      line-height: 56px;
      text-align: center;
      color: #222222;
      font-size: 16px;
      border-bottom: 1px solid #EFF0F3;
    }
    .tip{
      line-height: 28px;
      background: #f0f7ff;
      font-size: 12px;
      text-align: left;
      color: #479fff;
      padding-left: 42px;
      position: relative;
      &::after{
        display: block;
        content: " ";
        position: absolute;
        left: 20px;
        top: 7px;
        width: 14px;
        height: 14px;
        background-image: url('../assets/images/tipIcon.png');
        background-size: 100% 100%;
      }
    }
    .model{
      padding: 20px;
      .line{
        border-bottom: 1px solid #EFF0F3;
        padding: 15px 0;
        display: flex;
        align-items: center;
        .left{
          font-size: 14px;
          color: #444444;
          line-height: 20px;
          &::after{
            content: "*";
            color: red;
          }
        }
        input{
          height: 20px;
          font-size: 14px;
          line-height: 20px;
          margin-left: 44px;
          border: none;
          outline: none;
        }
      }
      .text{
        font-size: 12px;
        color: #8f949c;
        line-height: 16.5px;
        margin-top: 15px;
        margin-bottom: 50px;
      }
      .button{
        line-height: 44px;
        background: #479fff;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        width: 100%;
      }
    }
  }
  .content{
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    .headImg{
      width: 90px;
      height: 90px;
      margin: 0 auto;
      position: relative;
      img{
        border-radius: 50%;
        width: 90px;
        height: 90px;
      }
      &::after{
        content: " ";
        display: block;
        background-image: url('../assets/images/photo.png');
        width: 24px;
        height: 24px;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .ids{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 15px;
      span{
        font-size: 13px;
        text-align: left;
        color: #8f949c;
        line-height: 18.5px;
      }
      img{
        width: 14px;
        height: 14px;
        margin-left: 8px;
      }
    }
    .line{
      border-bottom: 1px solid #EFF0F3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;
      .left{
        width: 60px;
        font-size: 14px;
        text-align: left;
        color: #444444;
        line-height: 20px;
      }
      .right{
        width: calc(100% - 100px);
        height: 20px;
        font-size: 14px;
        color: #8f949c;
        line-height: 20px;
        text-align: right;
      }
      .nickName{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img{
          width: 7px;
          height: 11px;
          margin-left: 15px;
        }
      }
      .wallet{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img{
          margin-left: 8px;
          width: 14px;
          height: 14px;
        }
        div{
          width: calc(100% - 22px);
          word-break: break-all;
        }
      }
    }
    .tip{
      font-size: 12px;
      color: #8f949c;
      line-height: 16.5px;
    }
  }
</style>
